<template>
      <div class="shows">
        <p class="line"><span class="title">申请人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="applyIN">{{applyINfo?'收起':'展开'}}</a></p>
          <div class="apply" v-show="applyINfo"> 
              <DetailPeo :basicInfos="basicInfo.appList" :detailTitle="appTitle"></DetailPeo>
          </div>   
        <p class="line titledis"><span class="title">被申请人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="unapplyIN">{{unapplyINfo?'收起':'展开'}}</a></p>
            <div class="applyed" v-show="unapplyINfo"> 
              <DetailPeo :basicInfos="basicInfo.resList" :detailTitle="resTitle"></DetailPeo>
            </div>   
        <p class="line titledis"><span class="title">第三人信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="dsfapplyIN">{{unapplyINfo?'收起':'展开'}}</a></p>
            <div class="thirdPeo" v-show="dsfapplyINfo"> 
              <DetailPeo :basicInfos="basicInfo.dsfList" :detailTitle="dsfTitle"></DetailPeo>
            </div>   
        <p class="line titledis"><span class="title">证据清单</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a @click="unEvidenceM">{{unEvidence?'收起':'展开'}}</a></p>
              <div class="videnceList" v-show="unEvidence">
                <div class="evidenceInfo show evilist">
                   <p class="evilogo">申请人</p>
                   <div class="peopleshow">
                      <div v-for="(basic,index) in basicInfo.appList" :key="index">
                      <p class="evidetail">
                        {{basic&&basic.dealFlowName.length>=16?basic.dealFlowName.substr(0,16)+'...':basic.dealFlowName}}
                        <a @click="ruledoc(basic&&basic.downloadDealFlow)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewDealFlow)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.loanContractName>=16?basic.loanContractName.substr(0,16)+'...':basic.loanContractName}}
                        <a @click="ruledoc(basic&&basic.downloadLoanContract)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewLoanContract)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.replayPlanName>=16?basic.replayPlanName.substr(0,16)+'...':basic.replayPlanName}}
                        <a @click="ruledoc(basic&&basic.downloadReplayPlan)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewReplayPlan)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                    </div>
                   </div>
                </div>
                <div class="evidenceInfo show evilist">
                   <p class="evilogo">被申请人</p>
                   <div class="peopleshow">
                      <div v-for="(basic,index) in basicInfo.resList" :key="index">
                      <p class="evidetail">
                        {{basic&&basic.dealFlowName.length>=16?basic.dealFlowName.substr(0,16)+'...':basic.dealFlowName}}
                        <a @click="ruledoc(basic&&basic.downloadDealFlow)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewDealFlow)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.loanContractName>=10?basic.loanContractName.substr(0,10)+'...':basic.loanContractName}}
                        <a @click="ruledoc(basic&&basic.downloadLoanContract)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewLoanContract)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.replayPlanName>=16?basic.replayPlanName.substr(0,16)+'...':basic.replayPlanName}}
                        <a @click="ruledoc(basic&&basic.downloadReplayPlan)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewReplayPlan)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                    </div>
                   </div>
                </div>
                <div class="evidenceInfo show evilist">
                   <p class="evilogo">第三人</p>
                   <div class="peopleshow">
                      <div v-for="(basic,index) in basicInfo.dsfList" :key="index">
                      <p class="evidetail">
                        {{basic&&basic.dealFlowName.length>=16?basic.dealFlowName.substr(0,16)+'...':basic.dealFlowName}}
                        <a @click="ruledoc(basic&&basic.downloadDealFlow)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewDealFlow)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.loanContractName>=16?basic.loanContractName.substr(0,16)+'...':basic.loanContractName}}
                        <a @click="ruledoc(basic&&basic.downloadLoanContract)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewLoanContract)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                      <p class="evidetail">
                        {{basic&&basic.replayPlanName>=16?basic.replayPlanName.substr(0,16)+'...':basic.replayPlanName}}
                        <a @click="ruledoc(basic&&basic.downloadReplayPlan)">
                        <icon class="connectAddr"></icon>附件链接
                        </a>
                        <a @click="ruledoc(basic&&basic.previewReplayPlan)">
                        <icon class="preview"></icon>预览
                        </a>
                      </p>
                    </div>
                   </div>
                </div>
              </div>
        <p class="line titledis"><span class="title">证据</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <div class="vidence">
                <div class="evidenceInfo show">
                   <p class="evilogo">申请人</p>
                   <p><a @click="ruledoc(basicInfo.secretaryReview&&basicInfo.secretaryReview.evidence)"><icon class="connectAddr"></icon>证据附件链接</a></p>
                </div>
                <div class="evidenceInfo show">
                   <p class="evilogo">被申请人</p>
                   <p><a @click="ruledoc(basicInfo.secretaryReview&&basicInfo.secretaryReview.evidence)"><icon class="connectAddr"></icon>证据附件链接</a></p>
                </div>
                <div class="evidenceInfo show">
                   <p class="evilogo">第三人</p>
                   <p><a @click="ruledoc(basicInfo.secretaryReview&&basicInfo.secretaryReview.evidence)"><icon class="connectAddr"></icon>证据附件链接</a></p>
                </div>
              </div>
      </div>
      
    
</template>

<script>
import DetailPeo from './detailPeo'
export default {
  name: 'Detail',
  data(){
     return {
       applyINfo:true,
       unapplyINfo:true,
       dsfapplyINfo:true,
       unEvidence:true,
       appTitle:'申请人',
       resTitle:'被申请人',
       dsfTitle:'第三人',
      //  basicInfo:{},
       evidence:[],
       appEvidenceList:[],
       resEvidenceList:[],
       dsfEvidenceList:[]
     }
  },
  props: ['basicInfo'],
  methods:{
    back(){
      this.$router.push('/Syspage/Apply')
    },
    ruledoc(param){
      if(param){
        window.open(param)
      }else{
        this.$Message.warning('文件为空');
      }
    },
    handleSubmit () {
      this.$router.push('/Syspage/ApplySecondForm')
    },
    applyIN(){
      this.applyINfo=!this.applyINfo;
    },
    unapplyIN(){
      this.unapplyINfo=!this.unapplyINfo;
    },
    dsfapplyIN(){
      this.dsfapplyINfo=!this.dsfapplyINfo;
    },
    unEvidenceM(){
      this.unEvidence=!this.unEvidence;
    }
  },
  components:{DetailPeo}
  // created(){
  //     this.$http.post('/api'+this.urls.getCaseDetail,{caseNo:this.basicInfos}).then((result)=>{
  //         if(result.data.code==200){
  //             this.basicInfo=result.data.data;
  //         }
  //     })
  // }
  // created(){
  //   this.basicInfo=JSON.parse(this.basicInfos)
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .show{
    margin:0 20px;
  }
  .peopleshow{
    height: 236px;
    overflow-y: auto;
  }
  .viewform .ivu-form-item{
    margin-left: 22px;
  }
  .evilogo{
    font-weight: 600;
    height: 26px;
    line-height: 26px;
  }
  .evidetail{
    padding-left: 18px;
  }
  .evilist{
    height: 300px;
    border: 1px solid #e6e6e6;
    overflow-y: auto;
  }
  .evidenceInfo{
    padding: 12px 22px;
    border-bottom: 1px solid #e6e6e6;
  }
  .videnceList{
      display: grid;
      grid-template-columns: 33% 33% 33%;
      margin-top: 16px;
  }
  a{
    margin: 0;
  }
  .btn-apply{
    margin: 18px;
  }
  .line{
    background: #f6dfe1;
  }
  .title{
     color: #86141d;
  }
</style>
